/* 通用样式 */
.mybox {
  margin: 1rem;
  background-color: #ff0000;
  color: #ffffff;
  padding: 1rem;
  /* 
    圆角, 参数是圆角的大小
    圆角要搭配bordr或者背景才看的到效果
  */
  border-radius: 1rem;
}

/* 移动位置一 */
.tf1 {
  /* 
  transform表示变形，translateX是沿x轴移动
  参数是移动距离，如果是百分比表示是元素大小的百分比
  */
  transform: translateX(30%);
}

/* 移动位置二 */
.tf2 {
  /* 移动可以是负数，表示反方向移动 */
  transform: translateY(-0.9rem);
}

/* 旋转一 */
.tf3 {
  /* rotate是旋转，参数是角度值 */
  transform: rotate(15deg);
}

/* 旋转二 */
.tf4 {
  transform: rotateX(45deg);
}

/* 缩放一 */
.tf5 {
  transform: scaleX(0.6);
}

/* 缩放二 */
.tf6 {
  transform: scaleY(1.6);
}

/* 变形和动画 */
.tf7 {
  transform: translateX(20%);

  transition: transform 2s linear;
}

.tf7:hover {
  transform: translateX(0%);
}

.tf8 {
  width: 10rem;
  height: 10rem;
  margin: 1rem;
  border: 1px solid #ff0000;
}
/* 
@keyframes表示定义关键帧动画
格式：
@keyframes 关键帧动画的名称 {
  关键帧动画进度百分比 {
    动画进度到达百分比的时候元素css样式...
  }
  ...
}
*/
@keyframes key1 {
  0% {
    width: 10rem;
    height: 10rem;
    color: #000000;
  }
  /*
    动画进度：
    0%到50%的时候,宽度不变，高度从10-15，颜色从黑到红
    50%到100%的时候，高度不变，宽度从10-15，颜色从红变蓝
  */
  50% {
    width: 10rem;
    height: 15rem;
    color: #ff0000;
  }
  100% {
    width: 15rem;
    height: 15rem;
    color: #0000ff;
  }
}

.tf8:hover {
  /* animation是调用关键帧动画，参数1是关键帧动画名称，参数2是动画时长 */
  animation: key1 2s;
  width: 15rem;
  height: 15rem;
}

.tf9 {
  border: 1px solid #ff0000;
  border-radius: 1rem;
  padding: 1rem;
  margin: 1rem 20rem;
  text-align: center;
  /* infinite：无限循环动画，alternate：反弹动画 */
  animation: key2 2s infinite alternate;
}

@keyframes key2 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}
